<%= form_for @tour, url: url, html: { class: "intro-admin__form intro-admin__tour-form #{yield(:tour_form_class)}" } do |f| %>
  <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
  <% if @tour.errors.any? %>
    <div class='field error'>
      <div class='message list'>
        <% @tour.errors.full_messages.each do |message| %>
          <%= content_tag :div, message, class: 'item' %>
        <% end %>
      </div>
    </div>
  <% elsif flash.notice %>
    <div class='field info'>
      <%= content_tag :div, flash.notice, class: 'message' %>
    </div>
  <% end %>

  <div class='fields simple-route-fields'>
    <div class='twelve wide field'>
      <%= f.label :ident do %>
        <%= t('intro.admin.tour.simple_route') %>
        <i class='intro-admin__question' title="<%= t('intro.admin.tips.simple_route') %>"></i>
      <% end %>
      <%= text_field_tag 'tour[route][simple]', @tour.simple_route, placeholder: t('intro.admin.placeholders.simple_route'), class: 'js-tour-simple-route-input' %>
    </div>

    <div class='four wide field'>
      <div class='checkbox intro-admin__checkbox'>
        <%= check_box_tag 'tour[route][strict]', 1, @tour.strict_route? %>
        <%= label_tag 'tour[route][strict]', t('intro.admin.placeholders.strict_route'), title: t('intro.admin.tips.strict_route') %>
      </div>
    </div>
  </div>

  <div class='four fields'>
    <div class='field required'>
      <%= f.label :ident, t('intro.admin.tour.ident') %>
      <%= f.text_field :ident, placeholder: t('intro.admin.placeholders.tour_ident'), required: true, class: 'js-tour-ident-input' %>
    </div>

    <div class='field'>
      <%= f.label :controller_path, 'Controller' %>
      <%= f.text_field :controller_path, placeholder: 'Controller path', class: 'js-tour-controller-input' %>
    </div>

    <div class='field'>
      <%= f.label :action_name, 'Action' %>
      <%= f.text_field :action_name, placeholder: 'Action name', class: 'js-tour-action-input' %>
    </div>

    <div class='field'>
      <%= f.label :action_name, t('intro.admin.tour.query_params') %>
      <%= text_field_tag 'tour[route][query]', @tour.route[:query], placeholder: t('intro.admin.placeholders.query_params'), class: 'js-tour-query-input' %>
    </div>
  </div>

  <%= render 'steps' %>

  <details class='field'>
    <summary><%= t('intro.admin.others') %></summary>
    <div class='intro-admin__tour-others'>
      <% if Intro.config.visible_without_signing_in %>
        <div class='field'>
          <div class='checkbox intro-admin__checkbox'>
            <%= check_box_tag 'tour[options][not_sign_visible]', 1, @tour.options['not_sign_visible'] %>
            <%= label_tag 'tour[options][not_sign_visible]', t('intro.admin.placeholders.not_sign_visible') %>
          </div>
        </div>
      <% end %>

      <div class='field'>
        <div class='checkbox intro-admin__checkbox'>
          <%= check_box_tag 'tour[options][overlay_visible]', 1, @tour.options['overlay_visible'] %>
          <%= label_tag 'tour[options][overlay_visible]', t('intro.admin.placeholders.overlay_visible') %>
        </div>
      </div>

      <% btn_visible = @tour.new_record? || @tour.options['btn_visible'] %>

      <div class='field' style="<%= 'margin-bottom: 1em;' unless btn_visible %>">
        <div class='checkbox intro-admin__checkbox'>
          <%= check_box_tag 'tour[options][btn_visible]', 1, btn_visible, class: 'js-intro-btn-visible-input' %>
          <%= label_tag 'tour[options][btn_visible]', t('intro.admin.placeholders.btn_visible') %>
        </div>
      </div>

      <div class='two fields js-intro-complete-btn-fields <%= 'intro-admin__hide' unless btn_visible %>'>
        <%= render 'local_field',
          label: { name: :btn_complete_text, content: t('intro.admin.tour.btn_complete_text') },
          input: { name: 'tour[options][btn_complete_text]', object: @tour.options, attr: :btn_complete_text, options: { placeholder: t('intro.admin.placeholders.btn_complete_text') } }
        %>

        <div class='field'>
          <%= label_tag :btn_complete_link, t('intro.admin.tour.btn_complete_link') %>
          <%= text_field_tag 'tour[options][btn_complete_link]', @tour.options['btn_complete_link'], placeholder: t('intro.admin.placeholders.btn_complete_link') %>
        </div>
      </div>

      <div class='three fields'>
        <div class='field'>
          <%= f.label :expired_at, t('intro.admin.tour.expired_time') %>
          <%= f.text_field :expired_at, type: :date %>
        </div>
      </div>
    </div>
  </details>

  <div class='field intro-admin__tour-actions'>
    <%= button_tag t('intro.admin.submit'), class: 'intro-admin__button prime', type: :submit %>
    <%= button_tag t('intro.admin.test'), class: 'intro-admin__button js-intro-admin__button-test', type: :button %>
    <%= yield(:form_actions) %>
  </div>
<% end %>

<script>
  $(function () {
    var introTour

    // auto fill ident, controller, action, query input
    $('.js-tour-simple-route-input').change(function (e) {
      if (!e.target.value) return

      var $identInput = $('.js-tour-ident-input')
      var $controllerInput = $('.js-tour-controller-input')
      var $actionInput = $('.js-tour-action-input')
      var $queryInput = $('.js-tour-query-input')

      $.ajax({
        method: 'GET',
        url: "<%= route_admin_tours_path %>?path=" + encodeURIComponent(e.target.value),
        contentType: 'application/json',
        success: function (res) {
          var data = res && res.data
          if (!data) return

          if (data.source) {
            $controllerInput.val(data.source.controller)
            $actionInput.val(data.source.action)

            if (/^(([\/\w]+)#(\w+)-.*)|(\s*)$/.test($identInput.val())) {
              $identInput.val(data.source.controller + '#' + data.source.action + '-' + Math.random().toString(36).slice(-6))
            }
          }

          if (data.query) {
            $queryInput.val(data.query)
          }
        }
      })
    })

    // test tour
    $('.js-intro-admin__button-test').click(function () {
      var $this = $(this)
      var $form = $('.intro-admin__tour-form')

      if ($this.hasClass('intro-loading')) return

      $.ajax({
        method: 'POST',
        url: "<%= attempt_admin_tours_path %>",
        data: $form.serialize(),
        beforeSend: function () {
          $this.addClass('intro-loading')
          introTour && introTour.hide()
        },
        success: function (res) {
          if (res.data) {
            introTour = new window._intro.Tour(res.data)

            introTour.test({
              element: '.js-intro-admin__button-test'
            })
          }

          $this.removeClass('intro-loading')
        },
        error: function () {
          $this.removeClass('intro-loading')
        }
      })

    })

    // complete btn actions
    $('.js-intro-btn-visible-input').change(function (e) {
      var $field = $(this).closest('.field')
      var $completeBtnFields = $('.js-intro-complete-btn-fields')

      if (e.target.checked) {
        $completeBtnFields.removeClass('intro-admin__hide')
        $field.css('marginBottom', 'null')
      } else {
        $completeBtnFields.addClass('intro-admin__hide')
        $field.css('marginBottom', '1em')
      }
    })

    // local field
    $('.intro-admin__tour-form').on('change', '.js-intro-admin__locale-select', function () {
      var $this = $(this)
      var $field = $this.closest('.field')

      $field.find('.locale-input').removeClass('active')
      $field.find('.locale-input[data-locale="' + $this.val() + '"]').addClass('active')
    })
  })
</script>